<template>
  <div class="wrapper">
    <div class="gulu-buttons">
      <button  class="gulu-switch" @click="toogle" :class="{'gulu-checked':value}">
        <span></span>
      </button>
      <div class="button-font">{{value}}</div>
    </div>
  </div>
</template>

<script lang="ts">
import { ref } from "vue";
export default {
  props: {
    value: Boolean
  },
  setup(props, context) {
    const toogle = () => {
      context.emit("update:value", !props.value);
    };
    return {
      toogle
    };
  }
};
</script>
<style lang="scss" scoped>
$h: 22px;
$h2: $h - 4px;
.gulu-buttons {
  display: flex;
  align-items: center;
  > .gulu-switch {
    height: $h;
    width: $h * 2;
    border: none;
    background: #bfbfbf;
    border-radius: $h/2;
    position: relative;
    > span {
      position: absolute;
      top: 2px;
      left: 2px;
      height: $h2;
      width: $h2;
      background: white;
      border-radius: $h2 / 2;
      transition: all 250ms;
    }
  }
  button.gulu-checked {
    background: #1890ff;
    > span {
      left: calc(100% - #{$h2} - 2px);
    }
  }
  button:active {
    > span {
      width: $h2 + 4px;
    }
  }
  .button-font {
    font-size: 16px;
    margin-left: 10px;
  }
}
button.gulu-checked:active {
  > span {
    width: $h2 + 4px;
    margin-left: -4px;
  }
}
</style>